<template>
  <div class="warning">
    <!-- 创建预警折叠面板 -->
    <el-drawer
      title="创建预警"
      :visible.sync="isShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      :destory-on-close="true">
        <div class="div_border"></div>
        <warning></warning>
    </el-drawer>
    <div class="header" v-if="!isDrawerShow">
      <div class="header_span">
        <cell-header :title="`预警监控`" :type="1"/>
      </div>
    </div>
    <el-card shadow="never" style="position:relative;top:40px;height: calc(100vh - 120px)">
      <div class="warning_search" v-if="!isDrawerShow">
        <el-input v-model="value" size="small" placeholder="请输入">
          <i slot="suffix" class="el-input__icon el-icon-search" />
        </el-input>
        <el-button type="success" @click="createWarning">创建预警</el-button>
      </div>
      <el-button v-if="isDrawerShow" type="success" @click="createWarning">创建预警</el-button>
      <el-table :data="tableData">
        <el-table-column label="预警名称" prop="name">
        </el-table-column>
        <el-table-column label="监控对象" prop="object">
        </el-table-column>
        <el-table-column label="监控指标" prop="zhibiao">
        </el-table-column>
        <el-table-column label="上次预警时间" prop="data">
        </el-table-column>
        <el-table-column label="触发次数" prop="time">
        </el-table-column>
        <el-table-column label="状态" prop="status">
        </el-table-column>
        <el-table-column label="创建者" prop="createAuto">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <em class="operation_text" @click="stopWarning(scope.row)">暂停</em>
            <em class="operation_text" @click="editWaring(scope.row)">编辑</em>
            <em class="operation_text" @click="deleteWaring(scope.row)">删除</em>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page="page" :pageSize="pageSize" @pageSize="changePageSize" @page="changePage"></pagination>
    </el-card>
  </div>
</template>

<script>
import cellHeader from '@/components/cell-header.vue'
import pagination from '@/components/elementComponents/pagination.vue'
import warning from './create_warning.vue'
export default {
  components:{
    cellHeader,
    pagination,
    warning
  },
  props:{
    isDrawerShow: Boolean,
  },
  data(){
    return{
      total: 11,
      page: 1,
      pageSize: 10,
      isShow: false,
      tableData:[{
        name: '1',
        object: '22',
        zhibiao: '33',
        data: '2022-03-01',
        time: '33',
        status: '1',
        createAuto: '222',
      },
      {
        name: '1',
        object: '22',
        zhibiao: '33',
        data: '2022-03-01',
        time: '33',
        status: '1',
        createAuto: '222',
      }]
    }
  },
  mounted(){
    console.log(this.isDrawerShow)
  },
  methods:{
    // 分页
    changePageSize(data){
      this.pageSize = data
    },
    changePage(data){
      this.page = data
    },
    // 创建预警
    createWarning(){
      this.isShow = true
    },
    //停止预警
    stopWarning(scope) {

    },
    // 编辑预警
    editWarnig(scope) {

    },
    // 删除预警
    deleteWaring(scope){
      this.$confirm('本操作无法撤销，团队管理员可以删除改团队的所有预警。', `确定删除${scope.name}预警吗？`,{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel-btn',
      }).catch(err => err)
    }
  }
}
</script>

<style scoped lang="scss">
div /deep/ .el-drawer__body{
  overflow: scroll !important;
  width: 600px !important;
}
div /deep/.el-drawer__open .el-drawer.rtl {
    width: 600px !important;
}
 .div_border {
  width: 100%;
  height: 1px;
  border-top: 1px solid  rgba(0, 0, 0, 0.04);
  position: absolute;
  margin-top: -15px;
}
.header {
  width: 100%;
  height: 70px;
  position: fixed;
  // left: 0;
  margin-top: -25.7px;
  z-index: 99;
  background: #f9f9f9;
  .header_span {
    position: absolute;
    margin-top: 24px;
    // margin-left: 105px;
  }
}
.warning_search{
  display: flex;
  .el-input{
    width: 300px;
  }
  .el-button{
    position: absolute;
    right: 0;
    margin-right: 25px;
  }
}
.el-table{
  margin-top: 20px;
}
.operation_text{
  margin-right: 12px;
  cursor: pointer;
}
</style>
